<template>
  <div class="page">
    <m-header title="我的买单" :canback="Boolean(1)"></m-header>
    <div class="body">
      
      <div class="top">
        <div :class="{green:num==0}" @click="num=0">全部</div>
        <div :class="{green:num==1}" @click="num=1">已创建</div>
        <div :class="{green:num==2}" @click="num=2">待付款</div>
        <div :class="{green:num==2}" @click="num=3">已完成</div>
      </div>

      <div class="bot">
        
      </div>

    </div>
  </div>
</template>
<script>
import navItem from "@/components/order-nav-item.vue";
import { Owner } from "@/server/server.js";
import { Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      num:0,
      list:[
        {
          type:'充值增加',
          num:100,
          time:'2019-10-11'
        },
        {
          type:'充值增加',
          num:100,
          time:'2019-10-11'
        },
        {
          type:'充值增加',
          num:100,
          time:'2019-10-11'
        },
      ]
    };
  },
  computed: {
    ...mapGetters(["lang"])
  },
  created() {
    
  },
  mounted() {

  },
  methods: {
    
  },
  components: {
    navItem
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: @margin-primary;
  background-color: @bg-color;
  .top{
    width: 100%;
    background-color: #fff;
    height: 88px;
    line-height: 88px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    >div{
      width: 33.3%;
      font-size:32px;
      color:rgba(102,102,102,1);
    }
    .green{
      color: #4EB6AD;
      position: relative;
      &::before{
        content: '';
        width: 68px;
        height: 4px;
        position: absolute;
        bottom: 0;
        background-color: #4EB6AD;
        left: 91px;
      }
    }
  }
  
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>